<div class="content__title">
    <h1>
        A Full Demo Tables
    </h1>
</div>
<nz-card>
    <ng-template #body>
        <form nz-form>
            <div nz-row nz-form-item [nzGutter]="16">
                <div nz-form-label nz-col [nzSm]="2">
                    <label for="name">Name</label>
                </div>
                <div nz-form-control nz-col [nzSm]="5">
                    <nz-input [(ngModel)]="args.name" name="name" [nzId]="'name'"></nz-input>
                </div>
                <div nz-form-label nz-col [nzSm]="2">
                    <label>Created</label>
                </div>
                <div nz-form-control nz-col [nzSm]="8">
                    <div nz-row>
                        <div nz-form-control nz-col [nzSpan]="11">
                            <nz-datepicker [(ngModel)]="args.created_begin" name="created_begin" [nzPlaceHolder]="'begin'"></nz-datepicker>
                        </div>
                        <div nz-col [nzSpan]="1">
                            <p nz-form-split>-</p>
                        </div>
                        <div nz-form-control nz-col [nzSpan]="11">
                            <nz-datepicker [(ngModel)]="args.created_end" name="created_end" [nzPlaceHolder]="'end'"></nz-datepicker>
                        </div>
                    </div>
                </div>
                <div nz-form-label nz-col [nzSm]="2">
                    <label>Gender</label>
                </div>
                <div nz-form-control nz-col [nzSm]="5">
                    <nz-dropdown>
                        <a class="ant-dropdown-link" nz-dropdown>
                            {{args.gender ? args.gender : 'unlimit'}} <i class="anticon anticon-down"></i>
                        </a>
                        <ul nz-menu>
                            <li nz-menu-item (click)="args.gender=''">unlimit</li>
                            <li nz-menu-item (click)="args.gender='male'">male</li>
                            <li nz-menu-item (click)="args.gender='female'">female</li>
                        </ul>
                    </nz-dropdown>
                    <span class="text-grey-light">(only valid)</span>
                </div>
            </div>
            <div nz-row nz-form-item [nzGutter]="16" class="mb0">
                <div nz-form-label nz-col [nzSm]="2">
                    <label for="userid">User ID</label>
                </div>
                <div nz-form-control nz-col [nzSm]="5">
                    <nz-input [(ngModel)]="args.userid" name="userid" [nzId]="'userid'" [nzPlaceHolder]="'placeholder'"></nz-input>
                </div>
                <div nz-form-label nz-col [nzSm]="2">
                    <label>Modified</label>
                </div>
                <div nz-form-control nz-col [nzSm]="8">
                    <div nz-row>
                        <div nz-form-control nz-col [nzSpan]="11">
                            <nz-datepicker [(ngModel)]="args.modified_begin" name="modified_begin" [nzPlaceHolder]="'begin'"></nz-datepicker>
                        </div>
                        <div nz-col [nzSpan]="1">
                            <p nz-form-split>-</p>
                        </div>
                        <div nz-form-control nz-col [nzSpan]="11">
                            <nz-datepicker [(ngModel)]="args.modified_end" name="modified_end" [nzPlaceHolder]="'end'"></nz-datepicker>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSm]="5" [nzOffset]="2">
                    <button nz-button [nzType]="'primary'" (click)="load(1)" [nzLoading]="loading">Search</button>
                    <button nz-button (click)="clear()" [disabled]="loading">Clear</button>
                </div>
            </div>
        </form>
    </ng-template>
</nz-card>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #body>
                <div class="mb-sm text-right">
                    <nz-dropdown>
                        <button nz-button nz-dropdown [disabled]="!_allChecked && !_indeterminate">
                            <span>Export</span> <i class="anticon anticon-down"></i>
                        </button>
                        <ul nz-menu>
                            <li nz-menu-item>Excel</li>
                            <li nz-menu-item>JSON</li>
                            <li nz-menu-item>PNG</li>
                        </ul>
                    </nz-dropdown>
                </div>
                <nz-table #nzTable
                    [nzAjaxData]="list"
                    [nzShowSizeChanger]="true"
                    [nzLoading]="loading"
                    [nzTotal]="total"
                    [(nzPageIndex)]="pi"
                    (nzPageIndexChange)="load()"
                    [(nzPageSize)]="ps"
                    (nzPageSizeChange)="load()">
                    <thead nz-thead>
                        <tr>
                            <th nz-th [nzCheckbox]="true">
                                <label nz-checkbox
                                    [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                                    (ngModelChange)="_checkAll()">
                                </label>
                            </th>
                            <th nz-th><span>Avatar</span></th>
                            <th nz-th><span>Name</span></th>
                            <th nz-th><span>Age</span></th>
                            <th nz-th><span>Email</span></th>
                            <th nz-th><span>Event</span></th>
                            <th nz-th><span>Price</span></th>
                            <th nz-th><span>Registered</span></th>
                            <th nz-th><span>Actions</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                            <td nz-td [nzCheckbox]="true">
                                <label nz-checkbox [(ngModel)]="data.checked"
                                    (ngModelChange)="refChecked()">
                                </label>
                            </td>
                            <td nz-td>
                                <nz-avatar [nzSrc]="data.picture.thumbnail" [nzSize]="'large'"></nz-avatar>
                            </td>
                            <td nz-td>{{data.name.first}} {{data.name.last}}</td>
                            <td nz-td>
                                <nz-tag *ngIf="data.gender=='female'" [nzColor]="'pink'">female</nz-tag>
                                <nz-tag *ngIf="data.gender=='male'" [nzColor]="'green'">male</nz-tag>
                            </td>
                            <td nz-td>{{data.email}}</td>
                            <td nz-td>
                                <div sparkline data-bar-color="#cfdbe2"
                                    data-height="20" data-bar-width="2" data-bar-spacing="2"
                                    values="1,0,4,6,5,7,8,3,5,7,8"></div>
                            </td>
                            <td nz-td>{{data.price | _currency}}</td>
                            <td nz-td>{{data.registered | _date: 'YYYY年MM月DD日'}}</td>
                            <td nz-td>
                                <a (click)="showMsg('Edit')">Edit</a>
                                <span nz-table-divider></span>
                                <nz-popconfirm [nzTitle]="'Are you sure？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="showMsg('has deleted')" (nzOnCancel)="showMsg('cancel delete')">
                                    <a nz-popconfirm>Delete</a>
                                </nz-popconfirm>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
</div>
